<template>
  <div class="home">
    <home-canvas class="home-canvas" :style="{filter: calcFilter}" />
    <home-content class="home-content" ref="homeContent"/>
    <home-footer class="home-footer" :class="{homeFooterShow: isHomeFooterShow}"/>

    <change-page :isPgLight="isPgLight" :isPgItemActiveIndex="isPgItemActiveIndex" @change_page_0="change_page_0"/>
  </div>
</template>

<script>
import changePage from '../components/common/change_page/change_page.vue'

import homeFooter from '../components/content/home_footer/home_footer.vue'
import homeCanvas from '../components/content/home_canvas/home_canvas.vue'
import homeContent from '../components/content/home_content/home_content.vue'

import { throttle } from '../assets/js/common'

export default {
  components: {
    changePage,
    homeCanvas,
    homeContent,
    homeFooter
  },
  data() {
    return {
      isHomeFooterShow: false, // 判断底部 footer 栏是否显示
      isPgLight: false, // 判断 change-page 组件的颜色亮还是暗
      isPgItemActiveIndex: 0, // 判断 change-page 页数
      scrollTop: 0
    }
  },
  mounted() {
    let w_height = window.innerHeight < 720 ? 720 : window.innerHeight;
    this.$refs.homeContent.$el.style.marginTop = w_height + "px";
    // 记得最后要销毁这个监听，不然会在其他页面中 执行报错
    window.addEventListener("scroll", this.handleScroll);
  },
  computed: {
    // 滚动页面，渲染页模糊效果
    calcFilter: function() {
      return "blur(" + Math.min(this.scrollTop, 500) / 100 + "px)";
    }
  },
  methods: {
    /**
     * 底部信息栏，滚动超过 canvas 时显示
     */
    handleScroll: throttle(function() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 判断 changepage 是深色还是浅色
      if(this.scrollTop > 160) {
        this.isPgLight = true;
      } else {
        this.isPgLight = false;
      }
      // 判断 changepage 页数
      if(this.scrollTop < window.innerHeight) {
        this.isHomeFooterShow = false;
        this.isPgItemActiveIndex = 0;
      } else if(this.scrollTop < window.innerHeight + (window.innerHeight >= 920 ? window.innerHeight : 920)) {
        this.isHomeFooterShow = true;
        this.isPgItemActiveIndex = 1;
      } else {
        this.isHomeFooterShow = true;
        this.isPgItemActiveIndex = 2;
      }
    }, 200),
    // 当切换页面到 0 时，让 footer 消失（handleScroll有防抖，会延迟）
    change_page_0() {
      this.isHomeFooterShow = false;
    },
  }
}
</script>

<style scoped>
  .home {
    width: 100%;
  }
  
  .home-canvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -2;
  }

  .home-footer {
    display: none;
  }

  .homeFooterShow {
    display: block;
  }

  /* 网页整体适配 */
  @media screen and (max-height: 920px) {
    .home-content {
      margin-bottom: 0;
    }

    .homeFooterShow {
      display: none;
    }
  }
</style>